<template>
		<SkeletonScreen v-if="loading"></SkeletonScreen>
	<view style="position: fixed;top: 10rpx; z-index: 100; width: 100%;height: 80rpx; background-color: #000000;">
		<my-scroll-navbar @TagIndex="onnavIndex" :list="navIndexValue" :isNav="false"
			:isIcon="false"></my-scroll-navbar>
	</view>

	<scroll-view style="margin-top: 100rpx;" @scrolltolower="onBottumLoadingA" class="swiper-topic-list" scroll-y="true">
		<view class="img-three">
			<view class="image-eight-Three">
				<my-img-y-Three class="item" v-for="item in ImgPlayValue" :images="item.imageUrl" :name="item.name"
					:biao="item.tagsName" :episode="item.episode" :episodes="item.episode" :urlId="item.id"
					:urlName="'/pages/of_play/play/play?'"></my-img-y-Three>
			</view>
		</view>

		<view style="display: flex; justify-content: center; align-items: center; padding: 30rpx 0; color: #464646;">
			<view>到此为止...</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'

	import {
		newVideosList,
		newVideosUrl,
		newTagsIndex,
		collectionPlay,
		updadeVideosCreate
	} from '@/API/ofPlayApis.js';
	const navIndexValue = ref([]);
	const PlayPageNum = ref(1) //筛选下一页
	const onaNavTagsIndex = ref(0);
	const ImgPlayValue = ref([])
	const loading = ref(true)
	// 获取筛选导航栏数据
	const onNavIndexFunction = async () => {
		let res = await newTagsIndex();
		console.log("tags:", res);
		navIndexValue.value = res;

	}
	onNavIndexFunction();
	// 筛选导航栏
	function onnavIndex(e) {
		console.log(e.item.sortId);
		onaNavTagsIndex.value = e.item.sortId;
		ImgPlayValue.value = [];
		PlayPageNum.value = 1;
		collectionPlayFunction(1, e.item.sortId);
	}
	// 获取筛选短剧信息
	const collectionPlayFunction = async (pageNum, tags) => {
		let res = await collectionPlay(pageNum, 16, tags);
		console.log("video数据:", res);
		// 创建一个 Set 来记录已存在的 id
		const existingIds = new Set(ImgPlayValue.value.map(item => item.id));
		// 过滤 res.list，只添加 id 不存在于 existingIds 中的项
		const newItems = res.list.filter(item => !existingIds.has(item.id));
		// 合并更新
		ImgPlayValue.value = ImgPlayValue.value.concat(newItems);
		PlayPageNum.value = res.nextPage;
		loading.value = false
	}
	collectionPlayFunction(PlayPageNum.value, onaNavTagsIndex.value);
	// 推荐页面触底函数
	function onBottumLoadingA() {
		console.log("PlayPageNum.value", PlayPageNum.value);
		if (PlayPageNum.value > 1) {
			collectionPlayFunction(PlayPageNum.value, onaNavTagsIndex.value);
			console.log("触底了scroll")
		}
	}
</script>

<style scoped>
	.swiper-topic-list {
		width: 100%;
		height: 100vh;

	}

	.image-eight-Three {
		width: 100%;
		position: relative;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		display: grid;
		gap: 15rpx;
		grid-template-columns: repeat(3, 1fr);
		border-radius: 20rpx;
	}

	.item {
		overflow: hidden;
		/* 防止内容溢出 */
		position: relative;
		width: 100%;
		/* 图片宽度填充整个容器 */
		height: auto;
		/* 根据宽度自动调整高度 */
		display: block;
		/* 移除图片下方默认的空白间隙 */
		object-fit: cover;
		/* 保证图片完全覆盖容器，可能会裁剪图片 */
	}
</style>